<template>
  <div>
    <div id="map" ref="map"></div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      map: null,
      point: null,
      marker: null,
      local: null,
    };
  },

  methods: {
  },
  mounted() {
    //创建地图实例
    this.map = new window.BMapGL.Map(this.$refs.map);
    // 初始化地图,设置中心点坐标和地图级别
    this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    //开启鼠标滚轮缩放
    this.map.enableScrollWheelZoom(true);
    // 添加比例尺控件
    var scaleCtrl = new BMapGL.ScaleControl({
      offset: new BMapGL.Size(80,25)
    });
    this.map.addControl(scaleCtrl);

    // 添加缩放控件
    var zoomCtrl = new BMapGL.ZoomControl({
      anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
      offset: new BMapGL.Size(30,30)
    });
    this.map.addControl(zoomCtrl);

    //创建城市选择控件
    var cityControl = new BMapGL.CityListControl({
      // 控件的停靠位置（可选，默认左上角）
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // 控件基于停靠位置的偏移量（可选）
      offset: new BMapGL.Size(20, 20)
    });
    // 将控件添加到地图上
    this.map.addControl(cityControl)

    // 创建定位控件
    var locationControl = new BMapGL.LocationControl({
      // 控件的停靠位置（可选，默认左上角）
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      // 控件基于停靠位置的偏移量（可选）
      offset: new BMapGL.Size(20, 20)
    });
    // 将控件添加到地图上
    this.map.addControl(locationControl);

    locationControl.addEventListener("locationSuccess",function(e){
      console.log(e);

      //官方文档都报错真有你的
      // var address = '';
      // address += e.addressComponent.province;
      // address += e.addressComponent.city;
      // address += e.addressComponent.district;
      // address += e.addressComponent.street;
      // address += e.addressComponent.streetNumber;
      // console.log(address);
      // alert("当前定位地址为：" + address);
    });



    // this.map.addEventListener("click",function(e){//点击地图获取经纬度
    //   console.log(e.point)
    //   this.map.clearOverlays(); //清空原来的标注
    //   var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建标注，为要查询的地方对应的经纬度
    //   this.map.addOverlay(marker);
    //   this.getAddress(e.point)
    // });

    //添加一个点
    // this.marker = new window.BMapGL.Marker(this.point); // 创建标注
    // this.map.addOverlay(this.marker); // 将标注添加到地图中
    // this.local = new window.BMapGL.LocalSearch(this.map, {
    //   renderOptions: { map: this.map },
    // });
  },
  watch: {
  },

}
</script>

<style scoped>
#map {
  height: 80vh;
  width: 80%;
}
</style>
